<template>
	<div id="clue_audition_enroll">
		 
		<div class="title">
			预约试听（{{clue.realName}}）
			<div class="close" @click="cancel()"></div>
		</div>
		<div class="form">
			<div class="row">
				<label class="label">
					<span style="color: red;"></span>
					科目类型
				</label>
				<el-select style="width: 3.5rem;" v-model="subjectId" clearable
						   @change="subjectChange" placeholder="请选择科目类型">
				    <el-option v-for="item in subjectList" :key="item.subjectId"
				      		  :label="item.name" :value="item.subjectId">
				    </el-option>
			  	</el-select>
			</div>
			<div class="row">
				<label class="label">
					<span style="color: red;">*</span>
					试听班级
				</label>
				<el-select style="width: 3.5rem;" v-model="param.classId" id="classId"
							@change="auditionChange" placeholder="请选择试听班级">
				    <el-option-group v-for="group in auditionOptions"
				    				 :key="group.type" :label="group.type">
					    <el-option v-for="item in group.list" :key="item.classId" :value="item.classId"
					        	   :label="item.className" :disabled="item.disable">
					     </el-option>
				    </el-option-group>
			  	</el-select>
			</div>
			<div class="row">
				<label class="label">
					<span style="color: red;">*</span>
					上课时间
				</label>
				<el-date-picker style="width: 1.7rem;" v-model="classDate" value-format="yyyy-MM-dd"
				    			type="date" placeholder="上课日期" :clearable="false" id="classDate"
				    			@change="dateChange" :picker-options="pickerOptions">
			 	</el-date-picker>&nbsp;
				<el-select style="width: 1.7rem;" v-model="param.classSyllabusId" id="classSyllabusId"
						   @change="syllabusChange" placeholder="上课时间段">
				    <el-option v-for="item in syllabusList" :key="item.classSyllabusId"
				      		   :label="item.time" :value="item.classSyllabusId">
				    </el-option>
			  	</el-select>
			</div>
			
			<div class="row_1" v-if="syllabus">
				<span class="span">课程： {{syllabus.courseName}}</span>
				<span class="span">学员： {{syllabus.studentNum}} / {{syllabus.recruitNum}}</span>
				<span class="span">教师： {{syllabus.teacherUserName}}</span>
				<span class="span">教室： {{syllabus.classroomName}}</span>
				<span class="span">助教： {{syllabus.assisUserName}}</span>
			</div>
			
			<div class="row_2" v-if="syllabus">
				{{remark}}
			</div>
		</div>
		<div class="btn_div">
			<div class="btn_sure" @click="sure()">报 名</div>
			<div class="btn_cancel" @click="cancel()">取 消</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict,user;
export default {
	data : function() {
		return {
			clue : {},
			param : {
				clueIdList : null,
				classId : "",
				classSyllabusId : ""
			},
			subjectId : "",
			//科目列表,班级列表
			subjectList : null,
			auditionList : [],
			//课节日期
			classDate : "",
			//课节日期映射,课节列表
			syllabusMap : {},
			syllabusList : [],
	        //日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					return (vm.syllabusMap[date]? false : true);
				}
			},
			remark : ""
		}
	},
	computed : {
		auditionOptions : function() {
			var options = [
				{type : "线下试听", list : []},
			 	{type : "线上试听", list : []}
			];
			this.auditionList.forEach(function(item) {
				//当有选择科目时,过滤掉不属于当前科目的班级
				if(vm.subjectId && vm.subjectId != item.subjectId) {
					return;
				}
				//根据有没有课节判断,加入到选项中
				if(item.nearTrialClassSyllabus) {
					var index = (item.classTypeMode == 1? 0 : 1);
					options[index].list.push(item);
				}
			});
			return options;
		},
		audition : function() {
			var audition = null;
			var v = this;
			v.auditionList.forEach(function(item) {
				if(item.classId == v.param.classId) {
					audition = item;
					return false;
				}
			});
			return audition;
		},
		syllabus : function() {
			var syllabus = null;
			var v = this;
			v.syllabusList.forEach(function(item) {
				if(item.classSyllabusId == v.param.classSyllabusId) {
					syllabus = item;
					return false;
				}
			});
			return syllabus;
		}
	},
	methods : {
		init : function(clue) {
			//初始化数据
			vm.clue = clue;
			vm.param = {
				clueIdList : [clue.clueId],
				classId : "",
				classSyllabusId : ""
			};
			
			vm.subjectId = "";
			vm.classDate = "";
			vm.syllabusMap = {};
			vm.syllabusList = [];
			
			api.auditionList({campusId : vm.$store.state.campusId}).then(function(data) {
				vm.auditionList = data.list;
			});
			
			if(!vm.subjectList) {
				api.getSubjectList({orgId : user.orgId}).then(function(data) {
					vm.subjectList = data.list;
				})
			}
		},
		subjectChange : function() {
			vm.param.classId = "";
			//试听班级改变,清空日期和课节选择,清空课节列表
			vm.classDate = "";
			vm.param.classSyllabusId = "";
			vm.syllabusList = [];
			vm.syllabusMap = {};
		},
		auditionChange : function() {
			//试听班级改变,清空日期和课节选择,清空课节列表
			vm.classDate = "";
			vm.param.classSyllabusId = "";
			vm.syllabusList = [];
			//设置科目Id
			vm.subjectId = vm.audition.subjectId;
			
			//重新获取课节数据
			var param = {
				classId : vm.param.classId,
//				startTime : tool.DateToString(new Date(),"yyyy-MM-dd HH:mm:ss")
			};
			api.auditionSyllabus(param).then(function(data) {
				//解析日期课节映射
				vm.syllabusMap = vm.getSyllabusMap(data.list);
			});
		},
		getSyllabusMap : function(list) {
			var m = {};
			var now = tool.DateToString(new Date(),"yyyy-MM-dd HH:mm");
			list.forEach(function(item){
				//已结课,忽略
				if(now > item.endTime) {
					return;					
				}
				//截取时间段
				item.time = item.startTime.substring(11,16) + " - "+ item.endTime.substring(11,16);
				//截取日期,作为key
				var k = item.startTime.substring(0,10);
				if(m[k] == null) {
					m[k] = [];
				}
				m[k].push(item);
			});
			return m;
		},
		dateChange : function() {
			//获取课节列表
			vm.syllabusList = vm.syllabusMap[vm.classDate];
			vm.param.classSyllabusId = "";
		},
		syllabusChange : function() {
			var param = {
				classSyllabusId : vm.param.classSyllabusId,
				clueId : vm.clue.clueId
			}
			api.auditionClueCheck(param).then(function(data) {
				
				if(data.resultCode == 4036) {
					vm.remark = "学员已报名过当前试听班级";
					return;
				}
				if(vm.syllabus.studentNum >= vm.syllabus.recruitNum) {
					vm.remark = "当前试听班级已满员";
					return;
				}
				if(data.resultCode == 2000) {
					vm.remark = "";
				}
			});
		},
		cancel : function() {
			vm.$emit('cancel');
		},
		sure : function() {
			var rules = [{
				judge : vm.param.classId,
				focus : $("#clue_audition_choose #classId"),
				tips : "请选择试听班级"
			},{
				judge : vm.classDate,
				focus : $("#clue_audition_choose #classDate"),
				tips : "请选择上课日期"
			},{
				judge : vm.param.classSyllabusId,
				focus : $("#clue_audition_choose #classSyllabusId"),
				tips : "请选择上课时间段"
			},{
				judge : !vm.remark,
				tips : vm.remark
			}];
			if(!tool.validate(rules)) {
				return;
			}
			api.auditionEnroll(vm.param).then(function(data) {
				//获取课节时间
				vm.$emit('ok',vm.syllabus);
			})
			
		},
		
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict, true);
		user = tool.getItem(lsKey.user, true);
	}
}
</script>

<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped>
	.panel {
		width: 6.03rem;
	}
	
	.form {
		padding: 0.1rem 0.3rem 0 0.3rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		padding-bottom: 0.15rem;
	}
	.label {
		min-width: 0.85rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.1rem;
	}
	.row_1 {
		padding-top: 0.1rem;
		font-size: 0;
	}
	.span {
		font-size: 0.16rem;
		display: inline-block;
		min-width: 2.7rem;
		max-width: 5.4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 0.28rem;
		padding-left: 0.18rem;
	}
	.row_2 {
		padding-top: 0.1rem;
		text-align: center;
		color: #f43030;
		font-size: 0.16rem;
	}
</style>